<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style></style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <demo></demo>
        <first></first>
        <odiv></odiv>
        <my-head></my-head>
        <my-foot></my-foot>
        <my-menu></my-menu>
        <my-nav></my-nav>
        <my-swipe></my-swipe>
        <vm1></vm1>
        <div id="once"></div>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>

    </div>

    <script>
        // 全局注册 
        Vue.component("demo",{
            template:"<h3>Demo - Demo - Demo </h3>",
            data(){
                return {}
            },
            computed:{},
            methods:{},
            mounted(){},
            created(){},
            directives:{},
            filters:{},
            watch:{},
            components:{}
        })

        Vue.component('odiv',{
            template:"<h4>wh2114-daydayup </h4>"
        })
        Vue.component("MyFoot",{
            template:"<footer>wh2114-版权所有 </footer>"
        })
        Vue.component("myHead",{
            template:"<header>wh2114- 天道酬勤 </header>"
        })

        Vue.component("my-menu",{
            template:"<menu>菜单栏 - menu - menu </menu>"
        })

        Vue.component("myNav",{
            template:"<div> <h3>nav - nav - nav</h3> <h3>头部导航...</h3>  </div>"
        })

        const obj = {
            template:"<h3>Swiper - 手动封装的轮播组件  </h3>",
            mounted(){
                console.log("组件载入")
            }
        }
        Vue.component("my-swipe",obj)

        const obj2 = {
            template:"<h2>Vue.extend 可以创建一个“子类” 子组件</h2>"
        }
        const vm1 = Vue.extend(obj2)   // 创建Vue子类 
        Vue.component("vm1",vm1)
        new vm1().$mount('#once')
        Vue.component("my-btn",{
            template:"<button @click='countAdd'> {{count}}</button>",
            data(){   // 组件的data 必须是一个函数  必须有返回值(对象)
            // 形成独立的闭包变量作用范围 保护内部的数据不受其他外面的数据的污染 
                return {
                    count:1
                }
            },
            methods:{
                countAdd(){
                    this.count+=1
                }
            }
        })
        const vm = new Vue({
            data:{
                title:"Vue component 自定义组件",
            },
            components:{
                first:{
                    template:"<h2>First - vue 组件初始化 </h2>"
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
        Vue 组件  代码复用和抽象的主要形式是组件  封装代码  
        组件当做小型的 单元实例对象  带有一个名称  (小巧 独立 可复用)
        
        必须包含 一段  HTML标签的 代码块 (css样式 javascript代码)
        显示页面
        展示数据
        修改数据 

        组件当做小型的 vm 实例对象  (组件系统  vue 核心)
        Vue.component(name,options)  全局注册  name 组件名称  options 组件选项参数 
        components  局部注册 

        组件名规则  
        组件名  不能跟 html 标签一致
        mHead  遵循驼峰名 m-head  (HTML 不遵循驼峰命名 )
        组件首字母 可以大写 (单文件组件 JS 文件 )
        组件的模板 只能包含一个 根元素 顶层标签 
        组件书写可以使用单标签 (仅限 JS 使用)
        
        扩展继承  
        $.extends     $  静态对象   静态对象扩展  $.get $.post  $.ajax  
        $.fn.extends  $.fn  =  $.prototype 原型对象 原型对象扩展  $("#id").show().hide().css().eq().find().addClass().attr().remove()

        Vue.extend    使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项(el data computed methods mounted filters components directives )的对象
        extend   继承父类  
        class a extends Vue  ==> 创建子类 
        
        组件的选项参数  包含 之前你在实例写的任何属性 
        data 除外    在组件里面 data 属性必须是一个函数  必须有返回值  必须返回一个对象  
      
     -->
</body>
</html>